<template>
	<div id="home">
		<HomeHeader></HomeHeader>
		<HomeSwiper :swiperList="swiperList"></HomeSwiper>
		<HomeIcon :iconList="iconList"></HomeIcon>
		<HomeLocation></HomeLocation>
		<HomeHot></HomeHot>
		<HomeHotList :list="list"></HomeHotList>
		<HomeLike :lickList="lickList"></HomeLike>
	</div>
</template>

<script>
import {mapState} from "vuex"	
	
import HomeHeader from "./pages/header"
import HomeSwiper from "./pages/swiper"
import HomeIcon from "./pages/icon"
import HomeLocation from "./pages/location"
import HomeHot from "./pages/hot"
import HomeHotList from "./pages/hotlist"
import HomeLike from "./pages/like"



export default {
	components:{
		HomeHeader,
		HomeSwiper,
		HomeIcon,
		HomeLocation,
		HomeHot,
		HomeHotList,
		HomeLike
	},
	data (){
		return {
			swiperList:[],
			iconList:[],
			list:[],
			lickList:[],
			changeCity:""
		}
	},
    computed:{
    	...mapState(["city"])
    },
    methods:{
    	getHttp(){
    		/*	  api===> http://localhost:8080/static/mock*/
			this.$http.get("/api/data/dataHome.json")
			.then((res)=>{
				var data=res.data.data;
	//			console.log(data);
	            data.forEach((item,index)=>{
	                if(item.city==this.city){
	//              	console.log(item);
	      				this.swiperList=item.swiperList;
						this.iconList=item.iconList;
						this.list=item.list;
						this.lickList=item.lickList;
	                } 	
	            })
			})
    	}
    },
	mounted (){
		   this.changeCity= this.city,
		    this.getHttp()
	},
	activated(){
		 if(this.changeCity!=this.city){
		 	  this.getHttp(),
		 	  this.changeCity= this.city
		 }  
	}
}
	
	
</script>

<style>
body{
	background: #E4E7EA;
}
	
</style>